|
|
@ -1,67 +1,111 @@ |
|
|
|
<template> |
|
|
|
<view style="height: 100vh;background: #fff;"> |
|
|
|
<loading-state ref="pageView" @request="request"> |
|
|
|
<view style="height: 87vh;overflow: hidden;overflow-y: auto;"> |
|
|
|
<image :src="data.picUrl" style="width: 100vw;height: 80vw;" mode="aspectFill"></image> |
|
|
|
|
|
|
|
<loading-state ref="pageView" @request="request"> |
|
|
|
<view> |
|
|
|
<image :src="data.picUrl" style="width: 100vw;height: 80vw;" mode="aspectFill"></image> |
|
|
|
<!-- <view |
|
|
|
style="margin-top: 9px;margin-left: 9px;margin-right: 9px;border-top-left-radius: 13px;border-top-right-radius: 13px;display: flex;flex-direction: column;align-items: center;background-color: #FFFFFF;padding-top: 11px;"> |
|
|
|
<image src="../../static/goods_price_bg.png" |
|
|
|
style="width: 90vw;height: 16vw;border-radius: 10px;position: absolute;"></image> |
|
|
|
<view |
|
|
|
style="display: flex;flex-direction: row;justify-content: space-between;width: 80vw;position: relative;height: 16vw;align-items: center;color: white;"> |
|
|
|
<view> |
|
|
|
<text style="font-size: 14px;font-weight: 600;">¥</text> |
|
|
|
<text style="font-size: 24px;margin-left: 7px;font-weight: 500;">{{data.price}}</text> |
|
|
|
<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%;"> |
|
|
|
|
|
|
|
<text |
|
|
|
style="font-size: 18px;font-weight: 600;font-family: sans-serif;color: #333;">{{data.name}}</text> |
|
|
|
|
|
|
|
<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.price}}元/{{data.specificationUnit}}</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;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> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view |
|
|
|
style="left: 25px;font-size: 18px;width: 90vw;margin: 10px 0px;font-weight: 600;margin-left: 18px;"> |
|
|
|
{{data.name}} |
|
|
|
</view> |
|
|
|
|
|
|
|
</view> |
|
|
|
</loading-state> |
|
|
|
|
|
|
|
<view style="display: flex;flex-direction: column;align-items: center;margin-left: 9px;margin-right: 9px;"> |
|
|
|
<view |
|
|
|
style="border-bottom-left-radius: 13px;border-bottom-right-radius: 13px;background-color: #f9f9f9;width: 100%;display: flex;flex-direction: row;"> |
|
|
|
<image src="../../static/guige.png" |
|
|
|
style="width: 21px;height: 21px;margin-left: 12px;margin-top: 9px;margin-bottom: 12px;"></image> |
|
|
|
<view |
|
|
|
style="height: 21px;line-height: 21px;margin-top: 9px;font-size: 13px;color: #666666;margin-left: 5px;"> |
|
|
|
规格: |
|
|
|
{{data.remarks}} |
|
|
|
<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> |
|
|
|
</view> --> |
|
|
|
|
|
|
|
<view style="display: flex;flex-direction: column;background: #fff;padding: 20px;margin-top: 10px; |
|
|
|
border-top-left-radius: 20px;border-top-right-radius: 20px;height: 100%;"> |
|
|
|
<view style="color: #888;font-size: 10px;height: 10px;line-height: 10px;margin-top: 5px;"> |
|
|
|
,{{data.qssl}}斤起订。</view> |
|
|
|
|
|
|
|
<text style="font-size: 18px;font-weight: 600;font-family: sans-serif;color: #333;">{{data.name}}</text> |
|
|
|
<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 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> |
|
|
|
|
|
|
|
<view style="display: flex;flex-direction: row;align-items: center;margin-top: 20px;"> |
|
|
|
<view |
|
|
|
style="display: flex;flex-direction: row; justify-content: center;align-items: center;margin-top: 10px;padding: 0px 10px;margin-bottom: 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> |
|
|
|
<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> |
|
|
|
|
|
|
|
<view style="margin-top: 10px;" v-show="!data.appContent==''"> |
|
|
|
<rich-text :nodes="data.appContent | formatRichText" ></rich-text> |
|
|
|
</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> |
|
|
|
|
|
|
|
</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> |
|
|
|
|
|
|
|
</view> |
|
|
|
</loading-state> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
@ -69,7 +113,10 @@ |
|
|
|
data() { |
|
|
|
return { |
|
|
|
page: { |
|
|
|
sid: '' |
|
|
|
sid: '', |
|
|
|
weight: "", |
|
|
|
remarks: "", |
|
|
|
price: "" |
|
|
|
}, |
|
|
|
data: { |
|
|
|
picUrl: '', |
|
|
@ -77,14 +124,21 @@ |
|
|
|
price: '', |
|
|
|
remarks: '', |
|
|
|
appContent: "" |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
dialogContent: "这里是协议内容,这里是协议内容,这里是协议内容,这里是协议内容,这里是协议内容,这里是协议内容,这里是协议内容,这里是协议内容这里是协议内容,这里是协议内容", |
|
|
|
confirmText: "我知道了(5s)", |
|
|
|
dialogBeforeClose: false, |
|
|
|
dialogBeforeClose2: false, |
|
|
|
countdown: 5, |
|
|
|
|
|
|
|
} |
|
|
|
}, |
|
|
|
onLoad(options) { |
|
|
|
this.page.sid = options.sid |
|
|
|
this.request() |
|
|
|
}, |
|
|
|
filters: { |
|
|
|
filters: { |
|
|
|
/** |
|
|
|
* 处理富文本里的图片宽度自适应 |
|
|
|
* 1.去掉img标签里的style、width、height属性 |
|
|
@ -119,21 +173,168 @@ |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
request() { |
|
|
|
|
|
|
|
var params = { |
|
|
|
customerSid: getApp().globalData.sid, |
|
|
|
sid: this.page.sid, |
|
|
|
} |
|
|
|
|
|
|
|
console.log("request", params); |
|
|
|
|
|
|
|
|
|
|
|
let _this = this |
|
|
|
_this.$api.goodsDetail(this.page.sid).then((resp) => { |
|
|
|
console.log(resp); |
|
|
|
|
|
|
|
_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> |
|
|
|