123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305 |
- <template>
- <div class="module-item-tuwen" :style="!module.base.m ? 'margin-top:0' : ''">
- <div class="item-tuwen-con">
- <moduleBg :base="module.base" />
- <!--开通会员样式一-->
- <block v-if="module.link.type==3&&module.link.n=='openMenber'">
- <!-- 已经开通会员 -->
- <!-- #ifdef MP-WEIXIN -->
- <block v-if="userInfo.mobile">
- <div class="item-tuwen-style1" :style="!module.base.m ? 'padding:0':''" @click="onGetphone" v-if="module.base.s == 0">
- <p class="tit" v-if="module.title.s">
- <moduleText :text="module.title" />
- </p>
- <div class="item" :style="!module.base.m ? 'margin:0' : ''">
- <p v-if="module.img">
- <image :style="style" :src="module.img" />
- </p>
- <p v-else><img :src="$util.icon('img.jpg')" alt=""></p>
- <div class="note" v-if="module.note.s">
- <moduleText :text="module.note" />
- </div>
- </div>
- </div>
- <!--样式二-->
- <div @click="onGetphone" class="item-tuwen-style2" :style="!module.base.m ? 'padding:0':''" v-if="module.base.s == 1">
- <div class="item" :style="!module.base.m ? 'margin:0' : ''">
- <p v-if="module.img">
- <image :style="style" :src="module.img" />
- </p>
- <p v-else>
- <image :style="style" :src="$util.icon('img.jpg')" alt="">
- </p>
- <p class="tit" v-if="module.title.s">
- <moduleText :text="module.title" />
- </p>
- <div class="note" v-if="module.note.s">
- <moduleText :text="module.note" />
- </div>
- </div>
- </div>
- </block>
- <block v-else>
- <!-- 样式一 -->
- <button class="item-tuwen-style1" hover-class="none" :style="!module.base.m ? 'padding:0':''" open-type="getPhoneNumber" @getphonenumber="onGetphoneNumber"
- v-if="module.base.s == 0">
- <p class="tit" v-if="module.title.s">
- <moduleText :text="module.title" />
- </p>
- <div class="item" :style="!module.base.m ? 'margin:0' : ''">
- <p v-if="module.img">
- <image :style="style" :src="module.img" />
- </p>
- <p v-else><img :src="$util.icon('img.jpg')" alt=""></p>
- <div class="note" v-if="module.note.s">
- <moduleText :text="module.note" />
- </div>
- </div>
- </button>
- <!--样式二-->
- <button open-type="getPhoneNumber" hover-class="none" @getphonenumber="onGetphoneNumber" class="item-tuwen-style2" :style="!module.base.m ? 'padding:0':''"
- v-if="module.base.s == 1">
- <div class="item" :style="!module.base.m ? 'margin:0' : ''">
- <p v-if="module.img">
- <image :style="style" :src="module.img" />
- </p>
- <p v-else>
- <image :style="style" :src="$util.icon('img.jpg')" alt="">
- </p>
- <p class="tit" v-if="module.title.s">
- <moduleText :text="module.title" />
- </p>
- <div class="note" v-if="module.note.s">
- <moduleText :text="module.note" />
- </div>
- </div>
- </button>
- </block>
- <!-- #endif -->
- <!-- #ifdef MP-ALIPAY -->
- <div class="item-tuwen-style1" :style="!module.base.m ? 'padding:0':''" @click="onGetphone" v-if="module.base.s == 0">
- <p class="tit" v-if="module.title.s">
- <moduleText :text="module.title" />
- </p>
- <div class="item" :style="!module.base.m ? 'margin:0' : ''">
- <p v-if="module.img">
- <image :style="style" :src="module.img" />
- </p>
- <p v-else><img :src="$util.icon('img.jpg')" alt=""></p>
- <div class="note" v-if="module.note.s">
- <moduleText :text="module.note" />
- </div>
- </div>
- </div>
- <!--样式二-->
- <div @click="onGetphone" class="item-tuwen-style2" :style="!module.base.m ? 'padding:0':''" v-if="module.base.s == 1">
- <div class="item" :style="!module.base.m ? 'margin:0' : ''">
- <p v-if="module.img">
- <image :style="style" :src="module.img" />
- </p>
- <p v-else>
- <image :style="style" :src="$util.icon('img.jpg')" alt="">
- </p>
- <p class="tit" v-if="module.title.s">
- <moduleText :text="module.title" />
- </p>
- <div class="note" v-if="module.note.s">
- <moduleText :text="module.note" />
- </div>
- </div>
- </div>
- <!-- #endif -->
- </block>
- <!-- 默认样式 -->
- <block v-else>
-
- <view @click="$util.openOnly(module.link)" :style="!module.base.m ? 'padding:0':''"
- :url="module.link.n" class="item-tuwen-style1" v-if="module.base.s == 0">
- <p class="tit" v-if="module.title.s">
- <moduleText :text="module.title" />
- </p>
- <div class="item" :style="!module.base.m ? 'margin:0' : ''">
- <p v-if="module.img">
- <image :style="style" :src="module.img" />
- </p>
- <p v-else><img :style="style" :src="$util.icon('img.jpg')" alt=""></p>
- <div class="note" v-if="module.note.s">
- <moduleText :text="module.note" />
- </div>
- </div>
- </view>
-
- <!--样式二-->
- <view @click="$util.openOnly(module.link)" class="item-tuwen-style2" :style="!module.base.m ? 'padding:0':''" :url="module.link.n" v-if="module.base.s == 1">
- <div class="item" :style="!module.base.m ? 'margin:0' : ''">
- <p v-if="module.img">
- <image :style="style" :src="module.img" />
- </p>
- <p v-else>
- <image :style="style" :src="$util.icon('img.jpg')" alt="">
- </p>
- <p class="tit" v-if="module.title.s">
- <moduleText :text="module.title" />
- </p>
- <div class="note" v-if="module.note.s">
- <moduleText :text="module.note" />
- </div>
- </div>
- </view>
-
-
-
- </block>
- </div>
- <Vphone :getPhonePop="getPhonePop" @close="setClose"></Vphone>
- </div>
- </template>
- <script>
- import moduleBg from './bg.vue';
- import moduleText from './text.vue';
- import Vphone from '@/components/v-phone/v-phone.vue';
- let hideLoading = true;
- import {
- mapState,
- mapMutations
- } from 'vuex'
- export default {
- props: ['module'],
- components: {
- moduleBg,
- moduleText,
- Vphone
- },
- data() {
- return {
- getPhonePop: false,
-
- };
- },
- computed: {
- ...mapState(['systemInfo', 'setColor', 'store_id', 'userInfo', 'teen_index', 'address']),
- style() {
- if (this.module.note.h) {
- let style = `height:${this.module.note.h}px;`
- return style;
- }
- }
- },
- mounted() {
- },
- methods: {
- // 子组件传参
- setClose(e) {
- this.getPhonePop = e;
- },
- onGetphoneNumber(e) {
- if (this.userInfo.mobile) {
- uni.showToast({
- title: "您已经完善过会员信息了,无需重复操作!",
- icon: 'none'
- })
- return
- }
- // #ifdef MP-WEIXIN
- if (e.detail.errMsg == "getPhoneNumber:ok") {
- this.$http.request('xcx/Jiemi', {
- id: this.userInfo.id,
- data: e.detail.encryptedData,
- iv: e.detail.iv,
- sessionKey: uni.getStorageSync('user_xcx_info').session_key,
- store_id: this.store_id,
- }, "", "", hideLoading).then(res => {
- this.phoneNumber = res.data.phoneNumber;
- uni.setStorageSync('phone', res.data.phoneNumber);
- uni.showModal({
- title: '授权成功',
- content: '享受更多优惠!',
- showCancel: false,
- cancelText: '',
- confirmText: '确定',
- success: res => {
- let subscribe = uni.getStorageSync('balance_subscribe');
- uni.requestSubscribeMessage({
- tmplIds: [subscribe.member_tid],
- success: (r) => {
- // console.log(r, "success")
- },
- complete: (r) => {
- // console.log(r, "complete")
- uni.switchTab({
- url: "../my/my"
- })
- }
- })
- },
- fail: () => {},
- complete: () => {}
- });
- })
- } else {
- uni.showToast({
- title: "授权失败,请重新授权",
- icon: 'none'
- })
- }
- // #endif
- },
- // 开启会员弹窗
- onGetphone(e) {
- if (this.userInfo.mobile) {
- uni.showToast({
- title: "您已经完善过会员信息了,无需重复操作!",
- icon: 'none'
- })
- return
- }
- this.getPhonePop = true;
- },
- }
- };
- </script>
- <style lang="less" scoped>
- /***图文模块***/
- .module-item-tuwen{ margin-top:10px; position: relative; .mg0{ margin-top:0;}
- .item-tuwen-con{ position: relative; overflow: hidden;}
- .item-tuwen-style1{ position: relative; z-index: 1; padding:10px 0; overflow: hidden;
- .tit{ white-space: nowrap; font-size:14px; padding:10px; text-align:center; overflow: hidden; text-overflow: ellipsis;}
- .item{ margin:0 10px; position: relative; overflow: hidden;width:auto;
- image{ display:block; height:150px; width:100%;}
- .note{ line-height:18px; color:#fff; background:rgba(0,0,0,0.5); position: absolute; bottom:0;
- padding:6px 10px; width:100%;}
- }
- }
- .item-tuwen-style2{ position: relative; display:flex; flex-wrap: wrap; z-index: 1; padding:10px 0; overflow: hidden;
- .item{ margin:0 10px;width:100%;
- image{ display:block; height:150px; width:100%;}
- .tit{ white-space: nowrap; font-size:14px; padding-top:10px; text-align:center; overflow: hidden; text-overflow: ellipsis;}
- .note{ line-height:20px; color:#999; padding:6px 10px;}
- }
- }
- }
- /* 去除button默认样式 */
- button::after {
- border: none;
- }
- button {
- background-color: transparent;
- padding-left: 0;
- padding-right: 0;
- line-height: inherit;
- }
- button {
- border-radius: 0;
- }
- </style>
|