Skip to content

C
center-shop-show-h5
提交 b4cdc3ac authored 作者: 王鹏飞's avatar 王鹏飞
浏览文件
操作

chore: 页面配置字段调整

上级 f481ce36
隐藏空白字符变更
内嵌 并排
正在显示 包含 131 行增加 和 114 行删除
.config.dev.js
浏览文件 @ b4cdc3ac
module.exports = { module.exports = {
domain: 'dev.ezijing.com', domain: 'dev.ezijing.com',
url: 'https://h5-shop.ezijing.com/api', url: 'https://h5-shop2.ezijing.com/api',
webpack: { webpack: {
externals: { externals: {
CKEDITOR: 'window.CKEDITOR', CKEDITOR: 'window.CKEDITOR',
...@@ -22,6 +22,6 @@ module.exports = { ...@@ -22,6 +22,6 @@ module.exports = {
}, },
ProvidePlugin: {}, ProvidePlugin: {},
others: { others: {
loginUrl: 'https://login.ezijing.com/auth/login/index' loginUrl: 'https://login2.ezijing.com/auth/login/index'
} }
} }
src/pages/buy/components/BuyPopup.vue
浏览文件 @ b4cdc3ac
...@@ -21,8 +21,8 @@ ...@@ -21,8 +21,8 @@
/> />
</template> </template>
<!-- 提示 --> <!-- 提示 -->
<template #extra v-if="options.goods"> <template #extra v-if="options.spare">
<div class="tips" v-if="options.goods.charact">{{ options.goods.charact }}</div> <div class="tips" v-if="options.spare.buy_desc">{{ options.spare.buy_desc }}</div>
</template> </template>
</van-field> </van-field>
<van-form :show-error="false" @submit="handleSuccess"> <van-form :show-error="false" @submit="handleSuccess">
......
src/pages/buy/index.vue
浏览文件 @ b4cdc3ac
<template> <template>
<div class="buy-container"> <div class="buy-container">
<van-swipe class="my-swipe" indicator-color="white" @change="index => swipeAcitve = index"> <van-swipe class="my-swipe" indicator-color="white" @change="index => (swipeAcitve = index)">
<van-swipe-item class="video" v-if="details.main_chart_oss" @click="handleVideoClick"> <van-swipe-item class="video" v-if="details.main_chart_oss" @click="handleVideoClick">
<video :src="details.main_chart_oss" playsinline :poster="`${details.main_chart_oss}?x-oss-process=video/snapshot,t_10,f_jpg,w_0,h_0,m_fast`" ref="video"></video> <video
<van-icon :name="videoPlay ? 'pause-circle-o':'play-circle-o'" /> :src="details.main_chart_oss"
playsinline
:poster="`${details.main_chart_oss}?x-oss-process=video/snapshot,t_10,f_jpg,w_0,h_0,m_fast`"
ref="video"
></video>
<van-icon :name="videoPlay ? 'pause-circle-o' : 'play-circle-o'" />
</van-swipe-item> </van-swipe-item>
<van-swipe-item v-for="(item, index) in imgList" :key="item.url"> <van-swipe-item v-for="(item, index) in imgList" :key="item.url">
<img v-if="swipeAcitve === index + 1" :src="item.url"> <img v-if="swipeAcitve === index + 1" :src="item.url" />
</van-swipe-item> </van-swipe-item>
</van-swipe> </van-swipe>
<div class="item price-item"> <div class="item price-item">
<h6> <h6><span>￥</span>{{ priceFormat(details.price_zone) }}</h6>
<span>￥</span>{{priceFormat(details.price_zone)}}
</h6>
<p> <p>
<span class="title">{{details.spu_name || ''}}</span> <span class="title">{{ details.spu_name || '' }}</span>
<span class="surplus">剩余 {{details.stock}}</span> <span class="surplus">剩余 {{ details.stock }}</span>
</p> </p>
</div> </div>
<div class="item service-item"> <div class="item service-item">
...@@ -25,17 +28,17 @@ ...@@ -25,17 +28,17 @@
</div> --> </div> -->
<div class="service"> <div class="service">
<span>服务</span> <span>服务</span>
<p v-if="details.describe">{{details.describe}}</p> <p v-if="spare.service_desc">{{ spare.service_desc }}</p>
<p v-else>不支持退款</p> <p v-else>不支持退款</p>
<van-icon name="arrow"/> <van-icon name="arrow" />
</div> </div>
</div> </div>
<div class="item shop-item"> <div class="item shop-item">
<van-cell value="进店逛逛" is-link @click="navShop(shopInfo.shop_id)"> <van-cell value="进店逛逛" is-link @click="navShop(shopInfo.shop_id)">
<!-- 使用 title 插槽来自定义标题 --> <!-- 使用 title 插槽来自定义标题 -->
<template #title> <template #title>
<img class="shop-logo" :src="shopInfo.shop_logo"> <img class="shop-logo" :src="shopInfo.shop_logo" />
<span class="shop-name van-ellipsis">{{shopInfo.shop_name}}</span> <span class="shop-name van-ellipsis">{{ shopInfo.shop_name }}</span>
</template> </template>
</van-cell> </van-cell>
</div> </div>
...@@ -44,10 +47,12 @@ ...@@ -44,10 +47,12 @@
<div v-html="details.spu_context"></div> <div v-html="details.spu_context"></div>
</div> </div>
<div class="bottom-bar" v-if="details.status === '2'"> <div class="bottom-bar" v-if="details.status === '2'">
<van-button type="primary" round block color="#C01540" size="small" @click="handleBuy">{{details.buy_button_text || '立即购买'}}</van-button> <van-button type="primary" round block color="#C01540" size="small" @click="handleBuy">{{
details.buy_button_text || '立即购买'
}}</van-button>
</div> </div>
<buy-popup v-model="popupVisiable" :options="popupOptions" @placeOrder="handlePlaceOrder"/> <buy-popup v-model="popupVisiable" :options="popupOptions" @placeOrder="handlePlaceOrder" />
<phone-code-login-popup v-model="loginPopupVisiable" @loginSuccess="popupVisiable = true"/> <phone-code-login-popup v-model="loginPopupVisiable" @loginSuccess="popupVisiable = true" />
</div> </div>
</template> </template>
<script> <script>
...@@ -82,11 +87,19 @@ export default { ...@@ -82,11 +87,19 @@ export default {
query() { query() {
return this.$route.query return this.$route.query
}, },
spu_id () { spu_id() {
return this.query.spu_id || '' return this.query.spu_id || ''
}, },
shop_id () { shop_id() {
return this.query.shop_id || '' return this.query.shop_id || ''
},
spare() {
try {
return this.details.spare ? JSON.parse(this.details.spare) : {}
} catch (error) {
console.log('额外页面配置信息解析失败', error)
}
return {}
} }
}, },
beforeMount() { beforeMount() {
...@@ -139,7 +152,7 @@ export default { ...@@ -139,7 +152,7 @@ export default {
const params = Object.assign({}, val) const params = Object.assign({}, val)
params.customer_id = this.user.id params.customer_id = this.user.id
params.customer_phone = this.user.mobile || '' params.customer_phone = this.user.mobile || ''
params.buy_count = (params.buy_count).toString() params.buy_count = params.buy_count.toString()
params.redirect_url = this.order_details_url params.redirect_url = this.order_details_url
this.payment_method = params.payment_method this.payment_method = params.payment_method
if (params.payment_method === '3') { if (params.payment_method === '3') {
...@@ -148,7 +161,9 @@ export default { ...@@ -148,7 +161,9 @@ export default {
this.fetchPlaceOrder(params) this.fetchPlaceOrder(params)
}, },
getCode() { getCode() {
const redirectURI = `https://pages.ezijing.com/given/auth.html?redirect_uri=${encodeURIComponent(window.location.href)}` const redirectURI = `https://pages.ezijing.com/given/auth.html?redirect_uri=${encodeURIComponent(
window.location.href
)}`
window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx451c01d40d090d7a&redirect_uri=${redirectURI}&response_type=code&scope=snsapi_base#wechat_redirect` window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx451c01d40d090d7a&redirect_uri=${redirectURI}&response_type=code&scope=snsapi_base#wechat_redirect`
}, },
// 获取微信openid // 获取微信openid
...@@ -179,6 +194,7 @@ export default { ...@@ -179,6 +194,7 @@ export default {
} }
this.swipeAcitve = first.main_chart_oss ? 0 : 1 this.swipeAcitve = first.main_chart_oss ? 0 : 1
this.popupOptions = { this.popupOptions = {
spare: this.spare,
goods: first, goods: first,
specs: first.spec, specs: first.spec,
fields: first.app_button_text, fields: first.app_button_text,
...@@ -216,7 +232,7 @@ export default { ...@@ -216,7 +232,7 @@ export default {
if (typeof res.payment_more_info === 'string') { if (typeof res.payment_more_info === 'string') {
const payInfo = JSON.parse(res.payment_more_info) const payInfo = JSON.parse(res.payment_more_info)
if (payInfo.appId) { if (payInfo.appId) {
WeixinJSBridge.invoke('getBrandWCPayRequest', payInfo, (res) => { WeixinJSBridge.invoke('getBrandWCPayRequest', payInfo, res => {
window.location.href = this.order_details_url window.location.href = this.order_details_url
}) })
} }
...@@ -233,127 +249,128 @@ export default { ...@@ -233,127 +249,128 @@ export default {
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.buy-container{ .buy-container {
padding-bottom:1.04rem; padding-bottom: 1.04rem;
} }
.van-swipe-item{ .van-swipe-item {
.van-icon{ .van-icon {
position:absolute !important; position: absolute !important;
left:0.3rem; left: 0.3rem;
bottom:0.3rem; bottom: 0.3rem;
z-index:10; z-index: 10;
font-size:30px; font-size: 30px;
color:#fafafa; color: #fafafa;
} }
video, img{ video,
width:100%; img {
width: 100%;
} }
video::-webkit-media-controls{ video::-webkit-media-controls {
display:none !important; display: none !important;
} }
} }
.item{ .item {
background:#fff; background: #fff;
margin:0.1rem 0.1rem 0.2rem; margin: 0.1rem 0.1rem 0.2rem;
border-radius: 0.2rem; border-radius: 0.2rem;
padding:0.3rem 0.35rem; padding: 0.3rem 0.35rem;
} }
.price-item{ .price-item {
line-height:0.48rem; line-height: 0.48rem;
h6{ h6 {
color:#C01540; color: #c01540;
line-height:0.64rem; line-height: 0.64rem;
font-size:0.36rem; font-size: 0.36rem;
span{ span {
font-size:0.24rem; font-size: 0.24rem;
} }
} }
p{ p {
display:flex; display: flex;
.title{ .title {
flex:1; flex: 1;
font-size:0.28rem; font-size: 0.28rem;
} }
.surplus{ .surplus {
line-height:0.48rem; line-height: 0.48rem;
color:#B4B4B4; color: #b4b4b4;
font-size:0.26rem; font-size: 0.26rem;
} }
} }
} }
.service-item{ .service-item {
div{ div {
display:flex; display: flex;
line-height:0.8rem; line-height: 0.8rem;
font-size:0.26rem; font-size: 0.26rem;
span{ span {
width:1rem; width: 1rem;
color:#9B9B9B; color: #9b9b9b;
} }
p{ p {
flex:1; flex: 1;
} }
} }
.service{ .service {
position:relative; position: relative;
.van-icon{ .van-icon {
position:absolute; position: absolute;
right:0; right: 0;
top:50%; top: 50%;
transform:translateY(-50%); transform: translateY(-50%);
font-size:16px; font-size: 16px;
color: #969799; color: #969799;
} }
} }
} }
.shop-item{ .shop-item {
.van-cell{ .van-cell {
width:100%; width: 100%;
padding:0.2rem 0; padding: 0.2rem 0;
line-height:0.8rem; line-height: 0.8rem;
align-items:center; align-items: center;
::v-deep.van-cell__title{ ::v-deep.van-cell__title {
display:flex; display: flex;
width: calc(100% - 1.6rem); width: calc(100% - 1.6rem);
.shop-logo{ .shop-logo {
width:0.8rem; width: 0.8rem;
height:0.8rem; height: 0.8rem;
border-radius:0.1rem; border-radius: 0.1rem;
} }
.shop-name{ .shop-name {
width:calc(100% - 0.8rem); width: calc(100% - 0.8rem);
font-size:0.28rem; font-size: 0.28rem;
margin:0 0.1rem; margin: 0 0.1rem;
} }
} }
::v-deep.van-cell__value{ ::v-deep.van-cell__value {
flex: unset; flex: unset;
font-size:0.28rem; font-size: 0.28rem;
width:1.4rem; width: 1.4rem;
} }
} }
} }
.shop-details{ .shop-details {
* { * {
max-width:100% !important; max-width: 100% !important;
} }
::v-deep *{ ::v-deep * {
max-width:100% !important; max-width: 100% !important;
overflow-x:hidden; overflow-x: hidden;
} }
} }
.bottom-bar{ .bottom-bar {
position:fixed; position: fixed;
bottom:-1px; bottom: -1px;
width:100%; width: 100%;
max-width:750px; max-width: 750px;
box-sizing:border-box; box-sizing: border-box;
padding:0.2rem 0.8rem; padding: 0.2rem 0.8rem;
background:#fff; background: #fff;
.van-button{ .van-button {
height:0.64rem; height: 0.64rem;
line-height:0.64rem; line-height: 0.64rem;
font-size:0.24rem; font-size: 0.24rem;
} }
} }
</style> </style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论